<template>
  <div>
    <el-dialog
      :title="((previewData.materialName+'').length>20?previewData.materialName.substr(0,20)+'...':previewData.materialName)"
      :visible.sync="openPreview"
      :width="this.$store.getters.offsetWidth"
      @close="closeDialog"
      @open="openPreviewFunction"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <div class="previewClass">
            <video
              :style="{'width':previewWidth,'height':previewHeight}"
              controls
              loop
              muted
              v-if="previewData.type==2"
            >
              <source :src="previewData.previewPath" type="video/mp4" />
            </video>
            <img
              :style="{'width':previewWidth,'height':previewHeight,'border': '1px solid'}"
              v-if="previewData.type==1"
              :src="previewData.previewPath"
              alt
            />
            <p v-if="previewTextData">{{previewTextData}}</p>
            <!-- <div v-if="previewData.type==5" style="width:500px;height:400px"> -->
              <!-- <div class="videoDiv">
                <video
                  ref="player_ref"
                  v-if="isVideo"
                  id="my-player"
                  class="video-js vjs-default-skin vjs-big-play-centered"
                  controls
                  preload="true"
                  autoplay="true"
                  poster="//vjs.zencdn.net/v/oceans.png"
                  width="500"
                  height="400"
                  data-setup="{'liveui': true}"
                >
                  <source :src="options.url" :type="options.type" v-if="abc==''?true:''" />
                </video>
              </div> -->

            <!-- </div> -->
          </div>
          <!-- <span
        style="width: 100%;text-align: center;margin: 0 auto;height: 50px;display: block;"
        class="button_dialog"
          ></span>-->
            <!-- <source :src="options.url" type="application/x-mpegurl" v-if="abc==''?true:''" /> -->
        </div>
        <LivePlayer v-if="previewData.type==5" :videoUrl="options.url" fluent :autoplay="autoplay" live></LivePlayer>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import videojs from "video.js";
// import "video.js/dist/video-js.css";
// import "vue-video-player/src/custom-theme.css";
// import "videojs-flash";
import LivePlayer from '@liveqing/liveplayer'
export default {
  name: "search",
  props: {
    previewList: {
      required: true,
    },
  },
  components: {
    LivePlayer
  },
  data() {
    return {
      abc: "",
      name: "video.js", //video.js实现视频播放
      options: {
        url: "",
        type: "",
      },
      isVideo: true, //强制刷新使用
      player: null, //视频
      openPreview: false,
      previewData: {},
      previewTextData: "",
      previewWidth: "",
      previewHeight: "",
      autoplay:false
    };
  },
  watch: {
    previewList(val) {
      if (!val) {
        return;
      }
        this.openWin(val);
      // if (val.type == 3) {
      //   this.previewData = val;
      //   this.getTextData();
      // } else if (val.type == 4) {
      //   window.open(val.sourceUrl, "_blank");
      //   return;
      // } else if (val.type == 5) {
      //   this.options.url = val.sourceUrl;
      //   // this.initVideo();
      //   if (val.sourceUrl.substring(0, 4) == "http") {
      //     this.options.type = "application/x-mpegurl";
      //   } else if (val.sourceUrl.substring(0, 4) == "rtmp") {
      //     this.options.type = "rtmp/flv";
      //   }
      // }

      // this.previewData = val;
      // this.openPreview = true;
      this.$emit("emptyData", true);
    },
  },
  methods: {
    /**
     *   初始化播放视频
     **/
    initVideo() {
      //谷歌浏览器要专门去开启flash播放器，打包后查看和代码运行都需要重新设置flash为允许状态
      // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
      videojs.options.flash.swf =
        "https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf";
      this.player = videojs("my-player"); //my-player为页面video元素的id
      this.player.play(); //播放
    },
    openWin(val) {
      if(val.type == 1 || val.type == 2){
        this.ifSize(val)
      }else if (val.type == 3) {
        this.previewData = val;
        this.getTextData();
      } else if (val.type == 4) {
        window.open(val.sourceUrl, "_blank");
        return;
      } else if (val.type == 5) {
        this.options.url = val.sourceUrl;
        // this.initVideo();
        if (val.sourceUrl.substring(0, 4) == "http") {
          this.options.type = "application/x-mpegurl";
        } else if (val.sourceUrl.substring(0, 4) == "rtmp") {
          this.options.type = "rtmp/flv";
        }
      }
      this.previewData = val;
      this.openPreview = true;
    },
    openPreviewFunction() {
      if (this.previewData.type == 5) {
        this.$nextTick(() => {
          // this.initVideo();
        });
      }
    },
    ifSize(val){
      let cal = this.zycmUtils.calculationWH(val.width,val.height,500,500);
      this.previewWidth = this.zycmUtils.numMulti(val.width,cal.multiple)+"px";
      this.previewHeight = this.zycmUtils.numMulti(val.height,cal.multiple)+"px";
      /*  if (val.width > 5500||val.height > 5500) {
        this.previewWidth = 10 + "%";
        this.previewHeight = 10 + "%";
      } else if(val.width > 4100||val.height > 4100) {
        this.previewWidth = 25 + "%";
        this.previewHeight = 25 + "%";
      } else if (val.width > 3700||val.height > 3700) {
        this.previewWidth = 30 + "%";
        this.previewHeight = 30 + "%";
      } else if  (val.width > 3100||val.height > 3100) {
        this.previewWidth = 35 + "%";
        this.previewHeight = 35 + "%";
      } else if(val.width > 2400||val.height > 2400) {
        this.previewWidth = 40 + "%";
        this.previewHeight = 40 + "%";
      } else if (val.width > 2000||val.height > 2000) {
        this.previewWidth = 50 + "%";
        this.previewHeight = 50 + "%";
      } else if (val.width > 1600||val.height > 1600) {
        this.previewWidth = 60 + "%";
        this.previewHeight = 60 + "%";
      } else if (val.width > 1300||val.height > 1300) {
        this.previewWidth = 70 + "%";
        this.previewHeight = 70 + "%";
      } else if (val.width > 500||val.height > 500) {
         this.previewWidth =  80 + "%";
        this.previewHeight =  80 + "%";
      } else if (val.width < 500||val.height < 500) {
         this.previewWidth = val.width+'px';
        this.previewHeight = val.height+'px';
      }
         if (val.width > 1000&&val.height < 1000){
        this.previewWidth = 70 + "%";
        this.previewHeight = 70 + "%";
      } */
    },
    // 关闭预览
    closeDialog() {
      this.previewData = "";
      this.previewTextData = "";
      this.autoplay=false
      if (this.player) {
        this.player.dispose();
        this.player = null;
      }
    },
    // 获取文本
    async getTextData() {
      let token = window.sessionStorage.getItem("token");
      let formData = new FormData();
      formData.append("path", this.previewData.previewPath);
      formData.append("zycmToken", token);
      const { data: res } = await this.$http.post("material/showTxt", formData);
      this.previewTextData = res.data;
    },
  },
};
</script>



<style lang="stylus" scoped>
/deep/.el-dialog {
  .previewClass {
    display: flex;
    justify-content: center;
  }


  p {
    width: 100%;
    height: 500px;
    overflow-x: hidden;
    // overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
  }
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>
